<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<%@include file="/common/head.jsp" %>
<style>
    .form-control.inline {
        display: inline-block;
        width: 80%;
    }

    .control-label.text-left {
        text-align: left;
    }

    #temp {
        display: none;
    }

    #add {
        display: none;
    }

    .err {
        display: none;
        margin-top: 13px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form action="${ctx }/admin/agent/agentCustomerDetail/save" id="detail-form" class="form-horizontal" method="post">
        <input type="hidden" value="${customer.id}" name="id"/>
        <h4>基本信息</h4>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="text-danger">* </span>机构名称</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="orgName"
                       name="orgName" ${customer.orgName == null ? '' : 'readonly'} value="${customer.orgName }"
                       required>
            </div>

            <label class="col-sm-2 control-label"><span class="text-danger">* </span>医生名称</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="name" id="name" ${customer.name == null ? '' : 'readonly'}
                       value="${customer.name}" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="text-danger">* </span>登录账号</label>
            <div class="col-sm-4">
                <input type="text" class="form-control num_input" name="mobile" maxlength="11"
                       id="mobile" ${customer.mobile == null ? '' : 'readonly'} value="${customer.mobile }" required>
            </div>

            <label class="col-sm-2 control-label">身份证号</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="idCard" value="${customer.idCard}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">职称</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="title" value="${customer.title}">
            </div>

            <%--todo 根据身份证号确定性别--%>
            <label class="col-sm-2 control-label">性别</label>
            <div class="col-sm-4">
                <label><input type="radio" name="sex" value="1"
                              <c:if test="${customer.sex == 1 or customer.sex == null}">checked</c:if>>男</label>
                <label><input type="radio" name="sex" value="2"
                              <c:if test="${customer.sex == 2}">checked</c:if>>女</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-2">
                <select name="province.id" id="province" data-type="province"
                        data-value="${customer.province.id }" data-city="city"
                        class="form-control" onchange="refreshCity('city', $(this).val())">
                </select>
            </div>
            <div class="col-sm-2">
                <select name="city.id" id="city" class="form-control" data-district="district"
                        data-value="${customer.city.id }"
                        onchange="refreshDistrict('district', $(this).val())">
                </select>
            </div>
            <div class="col-sm-2">
                <select name="district.id" id="district" class="form-control"
                        data-value="${customer.district.id }">
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2"></div>
            <div class="col-sm-10">
                <input type="text" name="address" value="${customer.address}" class="form-control" placeholder="详细地址">
            </div>
        </div>

        <c:if test="${id != null}">
            <h4>账号信息</h4>
            <div class="form-group">
                <label class="col-sm-2 control-label">到期时间：</label>
                <label class="col-sm-2 control-label">
                    <c:choose>
                        <c:when test="${n.expireDate == null }">
                            <fmt:formatDate value="${customer.created}" pattern="yyyy-MM-dd"/>
                        </c:when>
                        <c:otherwise>
                            <c:if test="${restDays < 10 }">
                                <b style="color: red;"><fmt:formatDate value="${customer.expireDate}" pattern="yyyy-MM-dd"/></b>
                            </c:if>
                            <c:if test="${n.restDays >= 10}">
                                <fmt:formatDate value="${customer.expireDate}" pattern="yyyy-MM-dd"/>
                            </c:if>
                        </c:otherwise>
                    </c:choose>
                </label>
                <label class="col-sm-2 control-label">剩余时间：</label>
                <label class="col-sm-2 control-label">
                    <c:choose>
                        <c:when test="${customer.expireDate == null }">
                            <b style="color: red;">未激活</b>
                        </c:when>
                        <c:otherwise>
                            <c:if test="${restDays < 10 && restDays >= 0}">
                                <b style="color: red;">${restDays}天</b>
                            </c:if>
                            <c:if test="${restDays >= 10}">${restDays}天</c:if>
                            <c:if test="${restDays < 0}">
                                <b style="color: red;">已过期</b>
                            </c:if>
                        </c:otherwise>
                    </c:choose>

                </label>

            </div>
            <div class="form-group">
                <div class="col-sm-1"></div>
                <div class="col-sm-10">
                    <table id="table" data-toggle="table" data-striped="true" data-click-to-select="true"
                           data-mobile-responsive="true">
                        <thead>
                        <tr>
                            <th data-field="type">账号类型</th>
                            <th data-field="createDate">使用时间</th>
                            <th data-field="expiration">有效期</th>
                            <%--<th data-field="amount">使用个数</th>--%>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${customerServicePackageList}" var="s">
                            <tr>
                                <td>${s.servicePackage.name}</td>
                                <td><fmt:formatDate value="${s.created}" pattern="yyyy-MM-dd"/></td>
                                <td>${s.servicePackage.expireDays}天</td>
                                <%--<td>${s.count}</td>--%>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
                <div class="col-sm-1"></div>
            </div>
        </c:if>
        <c:if test="${id == null}">
            <c:if test="${existedServicePackageList.size() ne 0}">

                <h4>账号设置</h4>
                <div id="services">
                    <c:forEach items="${customerServicePackageList}" var="c">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">账号类型</label>
                            <div class="col-sm-3">
                                <select type="text" class="form-control" name="servicePackageId">
                                    <c:forEach items="${existedServicePackageList}" var="p">
                                            <option value="${p.id}" data-count="${p.remainCount}"
                                                    <c:if test="${c.servicePackage.id == p.id}">selected</c:if>>${p.name}(${p.expireDays}天)
                                            </option>
                                    </c:forEach>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label">个数限制</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control inline servicePackageCount" name="servicePackageCount"
                                       value="1" required>
                                个
                            </div>
                            <label class="col-sm-2 control-label text-danger text-left">
                                剩余：<span class="residual">${c.remainCount}</span>
                            </label>
                            <label class="col-sm-1 control-label">
                                <a href="javascript: void(0);" onclick="delServ(this)">删除</a>
                            </label>
                        </div>
                    </c:forEach>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">账号类型</label>
                    <div class="col-sm-3">
                        <select type="text" class="form-control" name="servicePackageId">
                            <c:forEach items="${existedServicePackageList}" var="p">
                                <option value="${p.id}" data-count="${p.remainCount}">${p.name}(${p.expireDays}天)</option>
                            </c:forEach>
                        </select>
                    </div>
                    <label class="col-sm-2 control-label">个数限制</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control inline servicePackageCount" name="servicePackageCount" value="1" readonly>
                        个
                    </div>
                    <label class="col-sm-2 control-label text-danger text-left">
                        剩余：<span class="residual">${existedServicePackageList[0].remainCount }</span>
                    </label>
                    <%--<label class="col-sm-1 control-label">
                        <a href="javascript: void(0);" onclick="delServ(this)">删除</a>
                    </label>--%>
                </div>
                <div class="form-group">
                    <div class="col-sm-4">
                        <label class="err text-danger">格式错误，个数必须是大于0的整数</label>
                    </div>
                </div>
            </c:if>
            <c:if test="${existedServicePackageList.size() eq 0}">
                <div class="form-group">
                    <label class="col-sm-1 control-label">&nbsp;</label>
                    <label class="col-sm-4 control-label text-danger">
                        服务包数量已用完，请联系客服购买。
                    </label>
                </div>
            </c:if>
        </c:if>
    </form>
</div>
<%--新增服务模板--%>
<div id="temp">
    <div class="form-group">
        <label class="col-sm-2 control-label">账号类型</label>
        <div class="col-sm-3">
            <select type="text" class="form-control" name="servicePackageId">
                <c:forEach items="${existedServicePackageList}" var="p">
                    <option value="${p.id}" data-count="${p.remainCount}">${p.name}(${p.expireDays}天)</option>
                </c:forEach>
            </select>
        </div>
        <label class="col-sm-2 control-label">个数限制</label>
        <div class="col-sm-2">
            <input type="text" class="form-control inline servicePackageCount" name="servicePackageCount" value="1" readonly>
            个
        </div>
        <label class="col-sm-2 control-label text-danger text-left">
            剩余：<span class="residual">${existedServicePackageList[0].remainCount }</span>
        </label>
       <%-- <label class="col-sm-1 control-label">
            <a href="javascript: void(0);" onclick="delServ(this)">删除</a>
        </label>--%>
    </div>
</div>

<div id="add">
    <div class="form-group">
        <label class="col-sm-3 control-label">
            <button type="button" class="btn btn-sm btn-primary" onclick="addServ(this)">新增</button>
        </label>
        <%--<div class="col-sm-4">
            <label class="err text-danger">格式错误，个数必须是大于0的整数</label>
        </div>--%>
    </div>
</div>

<%@include file="/common/foot.jsp" %>
<script>
    function validateInput() {
        var flag = true;
        var count = true;

        $("#services .servicePackageCount").each(function () {
            if ($(this).val() <= 0) {
                flag = false;
                count = false;
            }
        });

        if ($("input[name='orgName']").val().trim() === '') {
            flag = false;
            error('请填写机构名称');
        } else if ($("input[name='name']").val().trim() === '') {
            flag = false;
            error('请填写医生名称');
        } else if ($("input[name='mobile']").val().trim() === '') {
            flag = false;
            error('请填写登录帐号');
        }

        if (!count) {
            $(".err").show();
        } else {
            $(".err").hide();
        }

        return flag;
    }

    function addServ(ele) {
        $("#services").append($("#temp").html());
        $(ele).closest(".form-group").remove();
    }

    function delServ(ele) {
        $(ele).closest(".form-group").remove();
        $("#services").append($("#add").html());
        $(".err").hide();
    }

    // 限制账号类型数量输入为整数并判断
    $(document).on("input", ".servicePackageCount", function () {
        $(this).val($(this).val().replace(/\D/g, ""));
        if ($(this).val() > 0) {
            $(".err").hide();
        } else {
            $(".err").show();
        }
    });

    $(document).on("change", "select[name=servicePackageId]", function () {
        var p = $(this).closest(".form-group");
        var c = $(this).find('option:selected').data("count");
        p.find(".residual").html(c);
    });

    $(function () {
        refreshCity('city', '${customer.province.id}');
        refreshDistrict('district', '${customer.city.id}');
    })
</script>
</body>
</html>
